<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/css/swiper/index.css" />
  </head>
  <body>
    <div class="swiper">
      <input type="radio" name="btn" id="btn1" checked />
      <input type="radio" name="btn" id="btn2" />
      <input type="radio" name="btn" id="btn3" />
      <input type="radio" name="btn" id="btn4" />
      <input type="radio" name="btn" id="btn5" />
      <input type="radio" name="btn" id="btn6" />
      <input type="radio" name="btn" id="btn7" />

      <label for="btn1" style="--i: 1"></label>
      <label for="btn2" style="--i: 2"></label>
      <label for="btn3" style="--i: 3"></label>
      <label for="btn4" style="--i: 4"></label>
      <label for="btn5" style="--i: 5"></label>
      <label for="btn6" style="--i: 6"></label>
      <label for="btn7" style="--i: 7"></label>

      <ul>
        <li><img src="/images/swiper/1.png" alt="" /></li>
        <li><img src="/images/swiper/2.png" alt="" /></li>
        <li><img src="/images/swiper/3.png" alt="" /></li>
        <li><img src="/images/swiper/4.png" alt="" /></li>
        <li><img src="/images/swiper/5.png" alt="" /></li>
        <li><img src="/images/swiper/6.png" alt="" /></li>
        <li><img src="/images/swiper/7.png" alt="" /></li>
      </ul>
    </div>
  </body>
</html>
